<template>
	<view>
		<view style="background-color: #fff;">
			<u-subsection mode="subsection" activeColor="#ffaa7f" :list="subsectionList" :current="current"
				@change="sectionChange" />
		</view>

		<swiper :style="{height:`${swiperHeight}`}" easing-function="easeInOutCubic" :current="current"
			@change="swiperChange">
			<swiper-item v-for="(_,swiperIndex) in subsectionList" :key="swiperIndex">
				<scroll-view class="swiper_view" :style="scrollStyle[swiperIndex]||''" scroll-y
					:scroll-into-view="scrollIntoView" refresher-enabled :refresher-background="refresherBackground"
					:refresher-triggered="refresherTriggered" @scrolltolower="scrolltolower" @scroll="scroll"
					@refresherrefresh="refresherrefresh">
					<view style="padding-bottom: 10px;">
						<slot :name="`swiper-item-${swiperIndex}`" />
						<u-loadmore v-if="isLoadmore" status="loading" height="60rpx" />
					</view>
				</scroll-view>
				<slot :name="`fixed-button-${swiperIndex}`" />
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name: "pull-down-page",
		data() {
			return {
				current: 0,
				refresherTriggered: false,
				isLoadmore: false,
			};
		},
		props: {
			swiperHeight: {
				type: String,
				default: 'calc(100vh - 30px)'
			},
			scrollStyle: {
				type: Array,
				default: () => []
			},
			refresherBackground: {
				type: String,
				default: 'transparent'
			},
			subsectionList: {
				type: Array,
				default: () => []
			},
			scrollIntoView: {
				type: String,
				default: ''
			},
		},
		watch: {
			scrollIntoView(newData, oldData) {
				this.scrollIntoView = newData
			},
			subsectionList(newData, oldData) {
				this.subsectionList = newData
			},
		},
		methods: {
			sectionChange(index) {
				this.current = index;
			},
			swiperChange(e) {
				this.current = e.detail.current;
				this.$emit("sectionChange", this.current)
			},
			scrolltolower() { //滚动到底部
				this.isLoadmore = true
				this.$emit("scrolltolower", this.current)
			},
			scroll(e) { //滚动事件
				this.$emit("scroll", e)
			},
			refresherrefresh(e) { //下拉刷新被触发
				if (this.refresherTriggered) return
				this.refresherTriggered = true;
				this.$emit("pullDownRefresh", this.current)
			},
			stopRefresh() { //关闭下拉页
				setTimeout(() => {
					this.refresherTriggered = false;
					this.isLoadmore = false
				}, 500)
			},
		}
	}
</script>

<style lang="scss">
	.swiper_view {
		height: 100%;
	}
</style>